<template>
  <div id="app">
    <h1>------------app的内容------------------</h1>
    <h2>{{$store.state.count}}</h2>
    <h1>----------------------------------------</h1>
    <h3>要显示的name:{{$store.state.moduleA.name}}</h3>
    <button @click="changeName">moduleA修改名字</button>
    <button @click="achangeName">moduleA action修改名字</button>

    <!-- 展示vip商品 price>100 -->
    <h2>------------vip商品 price>100------------</h2>
    <ul>
      <li v-for="(item,index) in $store.getters.vipGoods" :key="index">{{item}}</li>
    </ul>

    <!-- 展示hot商品 price > 100 && num > 50-->
     <h2>------------hot商品 price>100和num>50------------</h2>
    <ul>
      <li v-for="(item,index) in $store.getters.hotGoods" :key="index">{{item}}</li>
    </ul>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <h1>moduleA 里面的getters:{{$store.getters.addName}}</h1>
    <home/>
  </div>
</template>

<script>
import Home from "@/components/Home"

export default {
  name: 'App',
  data(){
    return {
      name: "罗老汉",
      
    }
  },
  methods:{
    add(){
      this.$store.commit("increment")
    },
    sub(){
      this.$store.commit("decrement")
    },
    changeName(){
      this.$store.commit("changName",this.name)
    },
    achangeName(){
      this.$store.dispatch("achangeName","贾斯丁")
    }

  },
  components:{
    Home
  }
}
</script>

<style>

</style>
